﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://wubiyu.cnblogs.com/hdomext">
<head>
      <title></title>
      <link href="../../Theme/DomExtGray/gray.min.css" rel="Stylesheet" type="text/css" />
      <link href="PageModel.css" rel="Stylesheet" type="text/css" />
      <script type="text/javascript" src="../../domExt.min.js"></script>
</head>
<body unselectable="on">
      <div class="fun_title">
            _h.Drag 拖动辅助对象;
      </div>
      <div class="fun_content">
            描述：此对象在完成拖动时为拖动对象提供帮助。<br />
      </div>
      <div class="fun_title2">
            属性:
      </div>
      <div class="fun_content2">
           h.Drag.Data：拖动时传递的数据，此属性通常为框架内部使用，默认为 null。<br />
           h.Drag.Start ：设置为开始拖动状态，此属性通常为框架内部使用，默认为 null。<br />
            h.Drag.Fn：开始拖动时触发的事件句柄，通常为鼠标按下时。此属性通常为框架内部使用，默认为 null。<br />
            h.Drag.EscFn ：结束拖动时触发的事件句柄。通常为鼠标在目标对象上释放时。此属性通常为框架内部使用，默认为 null。<br />
            <br />
      </div>
       <div class="fun_title2">
            方法:
      </div>
      <div class="fun_content2">
            <span>h.Drag.SetData(dragData, fn, escFn) ;</span> 设置拖动数据。
      </div>
      <div class="fun_title2">
            示例预览:
      </div>
      <div class="code">
            请将源列表中的数据拖动到目标列表中。<br />
            拖动源列表
           <h:listview id="sourcelist1" ismultiselect="true">
            <h:itemtemplet>
                  {=[1]}
            </h:itemtemplet>
           </h:listview>
           拖动目标列表
           <h:listview id="tarlist">
           <h:itemtemplet>
                  {=[1]}
           </h:itemtemplet>
           </h:listview>
           <div id="testmsg"></div>
           <script type="text/javascript">
               _h.Page.OnLoadHandle = function () {
                   var sourcelist1 = _g("#sourcelist1");
                   _h.addEvent(sourcelist1, "mousedown", function () {
                       selectindexs = sourcelist1.GetSelect();
                       var dragData = new Array();
                       for (var i = 0; i < selectindexs.length; i++) {
                           dragData.push(sourcelist1.Data[selectindexs[i].index]);
                       }

                       _h.Drag.SetData(dragData, function (d) {
                           var dropPanel = _g("#testmsg");
                           dropPanel.style.display = "";
                           dropPanel.style.position = "absolute";
                           dropPanel.style.left = (_h.Page.MouseX + 20) + "px";
                           dropPanel.style.top = _h.Page.MouseY + "px";
                           dropPanel.html("拖动测试");
                       }, function (d) {
                           var dropPanel = _g("#testmsg");
                           dropPanel.style.display = "none";
                       });
                   });
                   var data = [[0, "测试0"], [1, "测试1"], [2, "测试2"], [3, "测试3"]];
                   sourcelist1.Bind(data);
                   var tarlist = _g("#tarlist");
                   data = [[0, "测试0"], [1, "测试1"], [2, "测试2"], [3, "测试3"]];
                   tarlist.Bind(data);

                   _h.addEvent(tarlist, "mousemove", function () {
                       var dropPanel = _g("#testmsg");
                       if (_h.Drag.Start) {
                           tarlist.style.border = "1px solid gray";
                       }
                       else {
                           tarlist.style.borderWidth = "0px";
                       }

                   }, true);

                   _h.addEvent(tarlist, "mouseout", function () {
                       tarlist.style.borderWidth = "0px";
                   });

                   _h.addEvent(tarlist, "mouseup", function () {
                       if (_h.Drag.Start) {
                           var data = _h.Drag.GetData();

                           if (data != null && data.length > 0) {
                               var tdata = tarlist.Data.concat(data);
                               tarlist.IsBind = false;
                               tarlist.Bind(tdata);
                           }

                       }
                       else {
                           tarlist.style.borderWidth = "0px";
                       }
                   });

               };
           </script>
      </div>
      <br />
      <div class="fun_title2">
            示例代码:
      </div>
      <div class="code">
            HTML code
            请将源列表中的数据拖动到目标列表中。<br /> 拖动源列表 <br />
            &lt;h:listview id=&quot;sourcelist1&quot; 
            ismultiselect=&quot;true&quot;&gt; 
            <br />
&nbsp;&nbsp;&nbsp; &lt;h:itemtemplet&gt; {=[1]} &lt;/h:itemtemplet&gt; 
            <br />
            &lt;/h:listview&gt; 
            <br />
            拖动目标列表  
            <br />
            &lt;h:listview id=&quot;tarlist&quot;&gt; 
            <br />
&nbsp;&nbsp;&nbsp; &lt;h:itemtemplet&gt; {=[1]} &lt;/h:itemtemplet&gt; 
            <br />
            &lt;/h:listview&gt; 
            <br />
            &lt;div id=&quot;testmsg&quot;&gt;&lt;/div&gt;
            <br />
            <br />
            &lt;script type=&quot;text/javascript&quot;&gt;
            <br />
            _h.Page.OnLoadHandle = function ()
            <br />
            {
            <br />
&nbsp;&nbsp;&nbsp; var sourcelist1 = _g(&quot;#sourcelist1&quot;);
            <br />
&nbsp;&nbsp;&nbsp; _h.addEvent(sourcelist1, &quot;mousedown&quot;, function ()
            <br />
&nbsp;&nbsp;&nbsp; {
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; selectindexs = 
            _h.ListView.GetSelect(sourcelist1);
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var dragData = new Array();
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for (var i = 0; i &lt; selectindexs.length; i++) { 
            dragData.push(sourcelist1.Data[selectindexs[i].index]); }
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _h.Drag.SetData(dragData, function (d)
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var dropPanel = 
            _g(&quot;#testmsg&quot;); dropPanel.style.display = &quot;&quot;;
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dropPanel.style.position 
            = &quot;absolute&quot;; dropPanel.style.left = (_h.Page.MouseX + 20) + &quot;px&quot;;
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dropPanel.style.top = 
            _h.Page.MouseY + &quot;px&quot;; dropPanel.html(&quot;拖动测试&quot;);
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, function (d)
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var dropPanel = 
            _g(&quot;#testmsg&quot;);
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dropPanel.style.display = 
            &quot;none&quot;;
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });
            <br />
&nbsp;&nbsp;&nbsp; });
            <br />
&nbsp;&nbsp;&nbsp; sourcelist1.Data = [[0, &quot;测试0&quot;], [1, &quot;测试1&quot;], [2, &quot;测试2&quot;], [3, &quot;测试3&quot;]];
            <br />
&nbsp;&nbsp;&nbsp; _h.ListView.Bind(sourcelist1); var tarlist = _g(&quot;#tarlist&quot;);
            <br />
&nbsp;&nbsp;&nbsp; _h.addEvent(tarlist, &quot;mousemove&quot;, function ()
            <br />
&nbsp;&nbsp;&nbsp; {
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var dropPanel = _g(&quot;#testmsg&quot;);
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (_h.Drag.Start) { tarlist.style.border = &quot;1px 
            solid gray&quot;; } else { tarlist.style.borderWidth = &quot;0px&quot;; }
            <br />
&nbsp;&nbsp;&nbsp; }, true);<br />
&nbsp;&nbsp;&nbsp; _h.addEvent(tarlist,&quot;mouseout&quot;, function () { tarlist.style.borderWidth = 
            &quot;0px&quot;; });
            <br />
&nbsp;&nbsp;&nbsp; _h.addEvent(tarlist, &quot;mouseup&quot;, function ()
            <br />
&nbsp;&nbsp;&nbsp; {
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (_h.Drag.Start)
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var data = 
            _h.Drag.GetData();
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (data != null &amp;&amp; 
            data.length &gt; 0) { 
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tarlist.Data = tarlist.Data.concat(data); 
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tarlist.IsBind = 
            false; 
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _h.ListView.Bind(tarlist);
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tarlist.style.borderWidth 
            = &quot;0px&quot;;
            <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
            <br />
&nbsp;&nbsp;&nbsp; });
            <br />
&nbsp;&nbsp;&nbsp; tarlist.Data = [[0, &quot;测试0&quot;], [1, &quot;测试1&quot;], [2, &quot;测试2&quot;], [3, &quot;测试3&quot;]];
            <br />
&nbsp;&nbsp;&nbsp; _h.ListView.Bind(tarlist);
            <br />
            }; 
            <br />
            &lt;/script&gt;</div>
      <script type="text/javascript">
            function run_click() {
                  var htmltemp = _g("#htmltemp");
                  var htmlcode = _g("#htmlcode");
                  htmltemp.innerHTML = htmlcode.value;
                  var jscode = _g("#jscode");
                  eval(jscode.value);
            }
      </script>
</body>
</html>
